<!doctype html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Touch-oriented scheduler</title>

	<script src="../../codebase/dhtmlxscheduler.js?v=5.3.10" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" href="../../codebase/dhtmlxscheduler_material.css?v=5.3.10" type="text/css"  title="no title"
	      charset="utf-8">
	<script src='../../codebase/ext/dhtmlxscheduler_timeline.js?v=5.3.10' type="text/javascript" charset="utf-8"></script>
	<script src="../../codebase/ext/dhtmlxscheduler_quick_info.js?v=5.3.10" type="text/javascript" charset="utf-8"></script>

	<style type="text/css" >
		html, body {
			height:100%;
			margin: 0;
			padding: 0;
		}
	</style>
</head>
<script type="text/javascript" charset="utf-8">
	function init() {
		scheduler.locale.labels.timeline_tab = "Timeline";
		scheduler.locale.labels.section_custom="Section";
		scheduler.config.details_on_create=true;
		scheduler.config.details_on_dblclick=true;
		scheduler.config.quick_info_detached = false;

		//===============
		//Configuration
		//===============
		var sections=[
			{key:1, label:"James Smith"},
			{key:2, label:"John Williams"},
			{key:3, label:"David Miller"},
			{key:4, label:"Linda Brown"}
		];

		scheduler.createTimelineView({
			name:	"timeline",
			x_unit:	"minute",
			x_date:	"%H:%i",
			x_step:	30,
			x_size: 24,
			x_start: 16,
			x_length:	48,
			y_unit:	sections,
			y_property:	"section_id",
			dy: 80,
			render:"bar"
		});

		//===============
		//Data loading
		//===============
		scheduler.config.lightbox.sections=[
			{name:"description", height:130, map_to:"text", type:"textarea" , focus:true},
			{name:"custom", height:23, type:"select", options:sections, map_to:"section_id" },
			{name:"time", height:72, type:"time", map_to:"auto"}
		];

		scheduler.init('scheduler_here',new Date(2017,1,18),"day");
		scheduler.parse([
			{ id: 1, start_date: "2017-02-18 09:00", end_date: "2017-02-18 12:00", text:"Task A-12458", section_id:1},
			{ id: 2, start_date: "2017-02-18 10:00", end_date: "2017-02-18 16:00", text:"Task A-89411", section_id:1},
			{ id: 3, start_date: "2017-02-18 10:00", end_date: "2017-02-18 14:00", text:"Task A-64168", section_id:1},
			{ id: 4, start_date: "2017-02-18 16:00", end_date: "2017-02-18 17:00", text:"Task A-46598", section_id:1},

			{ id: 5, start_date: "2017-02-18 12:00", end_date: "2017-02-18 20:00", text:"Task B-48865", section_id:2},
			{ id: 6, start_date: "2017-02-18 14:00", end_date: "2017-02-18 16:00", text:"Task B-44864", section_id:2},
			{ id: 7, start_date: "2017-02-18 16:30", end_date: "2017-02-18 18:00", text:"Task B-46558", section_id:2},
			{ id: 8, start_date: "2017-02-18 18:30", end_date: "2017-02-18 20:00", text:"Task B-45564", section_id:2},

			{ id: 9, start_date: "2017-02-18 08:00", end_date: "2017-02-18 12:00", text:"Task C-32421", section_id:3},
			{ id: 10, start_date: "2017-02-18 14:30", end_date: "2017-02-18 16:45", text:"Task C-14244", section_id:3},

			{ id: 11, start_date: "2017-02-18 09:20", end_date: "2017-02-18 12:20", text:"Task D-52688", section_id:4},
			{ id: 12, start_date: "2017-02-18 11:40", end_date: "2017-02-18 16:30", text:"Task D-46588", section_id:4},
			{ id: 13, start_date: "2017-02-18 12:00", end_date: "2017-02-18 18:00", text:"Task D-12458", section_id:4}
		]);
	}
</script>

<body onload="init();">
		<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
			<div class="dhx_cal_navline">
				<div class="dhx_cal_prev_button">&nbsp;</div>
				<div class="dhx_cal_next_button">&nbsp;</div>
				<div class="dhx_cal_today_button"></div>
				<div class="dhx_cal_date"></div>
				<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
				<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
				<div class="dhx_cal_tab" name="timeline_tab" style="right:280px;"></div>
				<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
			</div>
			<div class="dhx_cal_header">
			</div>
			<div class="dhx_cal_data">
			</div>
		</div>
</body>